<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="search-box">
          <el-row ref="search_form">
          </el-row>
          <el-form :inline="true" size="mini" :model="searchForm">
            <el-form-item label="">
              <el-input v-model="searchForm.name" size="mini" placeholder="请输入场地名称"></el-input>
            </el-form-item>
          </el-form>
          <el-form :inline="true" size="mini" :model="searchForm">
            <el-form-item>
              <el-button  size="mini" type="primary" @click="search">查询</el-button>
            </el-form-item>
            <!-- <el-form-item>
              <el-button  size="mini" type="primary" @click="clear">清空</el-button>
            </el-form-item> -->
          </el-form>
          <el-form :inline="true" size="mini">
            <el-form-item>
              <el-button type="primary" @click="showAddDialogForm">新增</el-button>
            </el-form-item>
          </el-form>

          <el-form :inline="true" size="mini" :model="searchForm">
            <el-form-item>
              <el-button type="primary" @click="search">刷新</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>

    <el-table
      :data="tableData"
			:header-cell-style="{backgroundColor:'#f4f4f5',textAlign:'center'}"
			:cell-style="{textAlign:'center'}"
			:height="tableHeight"
	border
			style="width: 100%">
      <el-table-column
			prop="id"
	label="序号"
	type="index"
	width="80">
      </el-table-column>
      <el-table-column
			prop="name"
	label="场地名称"
	min-width="300">
      </el-table-column>
      <el-table-column
      		prop="address"
      label="地址"
      min-width="300">
          </el-table-column>
      <el-table-column
			prop="note"
	label="备注"
	min-width="300">
      </el-table-column>
      <el-table-column
			prop="address"
	label="操作"
	min-width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="primary" @click="handleEditPrice(scope.$index, scope.row)">场地费管理</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
       <span class="demonstration"></span>
       <el-pagination
         @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
         :current-page="currentPage"
         :page-sizes="[10, 20, 50, 100,200]"
         :page-size="pageSize"
         layout="total, sizes, prev, pager, next, jumper"
         :total="total">
       </el-pagination>
     </div>

    <el-dialog :title="editForm.id==0?'新增':'修改'" :visible.sync="editFormVisible" width="500px" :close-on-click-modal="false">

      <el-form :model="editForm" ref="editForm" :rules="editRules">
        <el-form-item label="场地名称" label-width="100px" prop="name">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" label-width="100px" prop="address">
          <el-input v-model="editForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" label-width="100px">
          <el-input v-model="editForm.note" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFormVisible = false">取 消</el-button>
        <el-button type="primary" @click.native.prevent="submitForm" :loading="loading">{{ editForm.id==0?'添 加':'修 改' }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {validPhone} from '@/common/utils/validate.js'
			import request from '@/common/utils/request.js'
			import util from '@/common/utils/util.js'
			// import {getCarTypeList, addCarType, updateCarType, deleteCarType} from "@/api/car_type";
      import {getTestSiteManageList,addTestSiteManageList,amendTestSiteManageList,deleteTestSiteManageList} from "@/api/test_site";

	export default {
		name: "testSiteManage",
				data() {
			return {
					total: 0,
					pageSize: 10,
					currentPage: 1,
					tableData: [],
          tableHeight: 200,
					editFormVisible:false,
					loading: false,
          editForm: {
            id: 0,
						name: '',
						note: '',
            address:'',
			},
        editRules: {
				name: [{ required: true, message:"请输入场地名称", trigger: 'blur'}],
			},
			loadingDiv: null,
      searchForm: {
        name: ''
      },
			roleList:[],
    }
		},
		watch:{
			"editForm.id": function(val) {
				if(this.editForm.id == 0) {
					this.editRules['password'] = [{ required: true,min:6, message:"密码不能少于6个字符", trigger: 'blur'}];
				}else{
					this.editRules['password'] = [{ required: false,min:6, message:"密码不能少于6个字符", trigger: 'blur'}];
				}
			}
		},
		mounted() {
			this.getDataList(this.currentPage);

			let offsetHeight = this.$refs.search_form.$el.offsetHeight;
			if (!offsetHeight){
			  offsetHeight = 0;
			}

			this.$nextTick(() => {
					this.tableHeight = document.documentElement.clientHeight - 198;
    })
			window.onresize = () => {
				this.$nextTick(() => {
						this.tableHeight = document.documentElement.clientHeight - 198;
      })
			}
		},

		methods: {
      clear(){
        for(let key in this.searchForm){
          this.searchForm[key]  = ''
        }
        this.getDataList(1);
      },

      handleEditPrice(index, row) {
        // console.log(row)
        let item = {
          componentName:"testSitePriceManage",
          icon:"",
          path:"/base/test_site_price_manage/"+row.id,
          title: row.name+"-场地费维护",
        };

        this.$store.commit("openTab",{item:item, router: (path)=>{this.$router.replace(path)}})

      },




			showAddDialogForm() {
        this.editForm.id = 0
				this.editForm.name = "";
        this.editForm.address = "";
				this.editForm.note = "";
				this.editFormVisible = true;
			},
			handleEdit(index, row) {

				if(this.$refs.editForm){
					this.$refs.editForm.clearValidate();
				}
				this.editForm.id = row.id;
				this.editForm.name = row.name;
				this.editForm.note = row.note;
        this.editForm.address = row.address;
				this.editFormVisible = true;

			},
			submitForm() {
				this.$refs.editForm.validate(valid => {
				if(valid) {
					this.loading = true;
					let loadingText = "添加中...";
					if(this.editForm.id){
						loadingText = "修改中...";
					}
          const loadingDiv = util.showLoading(loadingText)
					let func = amendTestSiteManageList
					if(this.editForm.id == 0){
						func = addTestSiteManageList
					}
					func(this.editForm).then(res => {
							let title = "修改"
					if(this.editForm.id == 0){
						title = "添加"
					}
					if(res.code == 0) {
						this.$alert(res.msg, title+"失败", {dangerouslyUseHTMLString:true,type:'warning'})
					}else if(res.code == 1) {
						this.$alert(res.msg, title+"成功", {dangerouslyUseHTMLString:true,type:'success'})
                .then(()=> {
								this.editFormVisible=false;
						this.getDataList(this.currentPage)
                })
					}
					this.loading = false;
					loadingDiv.close();
          }).catch(res => {
							this.loading = false;
					loadingDiv.close();
          })
				}
      });
			},
			handleDelete(index, row) {
				let loadingDiv;
				this.$confirm("是否确认删除："+row.name+"?","删除确认").then(res=>{
				if(res='confirm'){
					loadingDiv = util.showLoading("删除中...")
					return deleteTestSiteManageList({id: row.id})
				}
      }).then(res => {
						loadingDiv.close();
				if(res.code == 0) {
					this.$alert(res.msg, "删除失败", {dangerouslyUseHTMLString:true,type:'warning'})
				}else if(res.code == 1) {
					this.$alert(res.msg, "删除成功", {dangerouslyUseHTMLString:true,type:'success'})
            .then(res=>{
							this.editFormVisible=false;
					this.getDataList(this.currentPage)
            })
				}
      }).catch(res=>{
				if (loadingDiv){
					loadingDiv.close();
				}
      })
			},
			getDataList(pageNum){
			  // console.log("页数"+pageNum);
			  const loadingDiv = util.showLoading()

			  let param = {
			    pageSize: this.pageSize,
			    pageNum: pageNum,
			  }
			  // console.log(this.searchForm)
			  for (let key in this.searchForm) {
       //    console.log("查询")
			    // console.log(this.searchForm[key])
			    param[key] = this.searchForm[key];
			  }

				getTestSiteManageList({
            name: this.searchForm.name,
						pageSize: this.pageSize,
						pageNum: pageNum,
      }).then(res => {
				if(res.code == 0) {
					this.$message({
							showClose: true,
							message: res.msg,
							type: 'error'
          });
				}else if(res.code == 1) {
					let data = res.data;
					this.currentPage = pageNum;
					this.total = data.total;
					this.tableData = data.dataList;
				}
				loadingDiv.close();
      }).catch(res => {
						loadingDiv.close();
      })
			},
			search() {
				this.getDataList(this.currentPage)
			},
			handleSizeChange(pageSize) {
			        this.pageSize = pageSize;
			        this.getDataList(1)
			      },
			handleCurrentChange(pageNum) {
			        this.getDataList(pageNum);
			      },
         handleSizeChange(pageSize){
           this.pageSize = pageSize;
           this.getDataList(1)
         }
		}
	}
</script>

	<style scoped lang="scss">
	// @import "~@/common/styles/element-variables.scss";
  .search-box {
		background-color: #FFFFFF;
		min-height: 36px;
		line-height: 36px;
		padding-top: 2px;
		padding-bottom: 6px;
    .el-form-item {
			margin-bottom: 0px !important;
		}
    .el-form--inline {
			display: inline-block;
		}
	}
  .pagination-box {
		text-align: left;
		margin-top: 10px;
	}
</style>
<style lang="scss">
			.el-dialog__header {

	}
  .el-dialog__body {
		padding-top: 10px;
		padding-bottom: 0px;
	}
  .el-dialog__footer {
		padding-top: 0px;
	}
</style>
